import {Typography} from 'antd';
import React, {useEffect, useState} from 'react';
import {GridContent, PageContainer} from '@ant-design/pro-layout';
import {Link, connect} from 'umi';
import styles from './style.less';
import {genTdkCrumbs} from "@/utils/utils";
import Title from "antd/lib/typography/Title";
import {previewElement, queryElement} from "@/pages/book/read/element/service";

const Element = (props) => {
  const {dispatch, match, } = props;
  const [article, setArticle] = useState(undefined);

  useEffect(async () => {
    const {params} = match;
    const res = !params.preview ? await queryElement({id: params.id}) : await previewElement({id: params.id, preview: params.preview});

    if (res?.data) {
      await genTdkCrumbs(res.data, dispatch, '正文', '');
      setArticle(res.data);
    }
  }, [match.url]);

  const titleStyle = {
    marginBottom: '8px',
    paddingBottom: '8px',
    lineHeight: '40px',
    fontSize: '28px',
    fontWeight: '500',
    borderBottom: '2px solid #f4f4f4'
  };

  const articleBody = article && (
    <Typography>
      <Title level={1} style={titleStyle}>{article.pubTitle}</Title>
      <div className={styles.entry} dangerouslySetInnerHTML={{ __html: article.pubContent}}>
      </div>
      <div className={styles.pubPrevNext}>
        {article.prev && (<><strong>上一篇</strong>：<Link to={`/element-${article.prev.id}.html`} rel="prev">{article.prev.pubTitle}</Link><br/></>)}
        {article.next && (<><strong>下一篇</strong>：<Link to={`/element-${article.next.id}.html`} rel="next">{article.next.pubTitle}</Link></>)}
      </div>
      <div className={styles.clearfix}/>
    </Typography>
);

return (
  <PageContainer title={false} breadcrumb={false}>
    <GridContent>
      {article === "" ? <p>请求的内容不存在了……</p> : articleBody}
    </GridContent>
  </PageContainer>
);
};

export default connect(({ user } ) => (
  {
    tdk: user.tdk,
  }
))(Element);